<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4414631_1088pxqvbhm9.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .body {
        background-image: url("${pageContext.request.contextPath}/static/images/registerbackground.png");
        width: 99.9%;
        height: 99.8%;
        background-repeat: no-repeat;
        background-size: cover;
        background-clip: border-box;
        border: 1px solid transparent;
    }

    .zhuti {
        width: 430px;
        height: 420px;
        margin: 0 auto;
        margin-top: 100px;
        background: rgba(255, 255, 255, 0.4);
        padding: 50px;
        border-radius: 5px;
    }

    .zhuce {
        width: 400px;
        margin: 0 auto;
        cursor: default;
    }

    h1 {
        display: inline-block;
        color: orange;
    }

    .denglu {
        display: inline-block;
        float: right;
        margin-top: 20px;
    }

    .denglu a {
        display: inline-block;
    }

    input {
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    .in {
        width: 350px;
        height: 50px;
    }

    .check {
        display: inline-block;
        cursor: pointer;
    }

    label {
        margin-left: 130px;
        transition: all 0.3s;
    }

    .btn {
        color: white;
        font-weight: bolder;
        background-color: darkorange;
        border: 1px transparent solid;
        font-size: 20px;
        border-radius: 10px;
        transition: all 0.3s;
    }

    .in1 {
        padding-left: 30px;
    }

    .neibu {
        margin-top: -10px;
    }

    a {
        text-decoration: none;
    }

    .a1 {
        transition: all 0.3s;
    }

    label:hover {
        cursor: pointer;
        color: darkorange;
    }

    .btn:hover {
        cursor: pointer;
        color: #40485b;
        background-color: #e5a632;
    }

    .a1:hover {
        color: #00f7de;
    }

    .username:before {
        font-family: 'iconfont';
        content: "\e624";
        font-size: 20px;
        color: black;
        position: relative;
        top: 54px;
        left: 46px;
    }

    #error{
        color: red;
        font-size: 16px;
        display: none;
    }

    .password:before {
        font-family: 'iconfont';
        content: "\e8b2";
        font-size: 20px;
        color: black;
        position: relative;
        top: 54px;
        left: 46px;
    }

    .email:before {
        font-family: 'iconfont';
        content: "\e908";
        font-size: 20px;
        color: black;
        position: relative;
        top: 54px;
        left: 46px;
    }

    .clear:after {
        content: '';
        display: block;
        clear: both;
    }
</style>
<script>
    function usernameCheck(){
        var xmlHTTP=new XMLHttpRequest();
        xmlHTTP.onreadystatechange=function (){
            if (xmlHTTP.readyState==4 && xmlHTTP.status==200){
                var error=xmlHTTP.response;
                var flag =JSON.parse(error);
                console.log(flag)
                if (flag.msg==='400'){
                    $("#error").css('display','block');
                }else {
                    $("#error").css('display','none');
                }
            }
        }
        var username=document.getElementById("username").value;
        xmlHTTP.open("get","${pageContext.request.contextPath}/userinfo/usernameCheck?username="+username,true);
        xmlHTTP.send();
    }
</script>
<body>
<div class="body">
    <div class="zhuti">
        <div class="neibu">
            <div class="zhuce clear">
                <h1>注册</h1>
                <div class="denglu">
                    <span>已有账号？</span>
                    <a href="${pageContext.request.contextPath}/toLogin" class="a1">点此登录</a>
                </div>
            </div>
            <form action="${pageContext.request.contextPath}/userinfo" method="post">
                <div class="username"><input type="text" placeholder="请输入用户名" id="username" name="username" class="in in1" onblur="usernameCheck()" required></div>
                <p id="error">用户名重复，请重新输入！</p>
                <div class="password"><input type="text" placeholder="请输入密码" name="password" class="in in1" required></div>
                <div class="email"><input type="text" placeholder="请输入邮箱" name="email" class="in in1" required></div>
                <label><input type="checkbox" class="check"><span class="sp1">我已阅读并同意使用条款</span></label>
                <input type="submit" class="btn in" value="立即注册">
            </form>
        </div>
    </div>
</div>
</body>
</html>
